<!DOCTYPE html>
<html>
    <head>
        <title>ContextMenu</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../../../../lib/core/ht.js"></script>  
        <script src="key.js"></script>
        <script src="../../../../lib/plugin/ht-contextmenu.js"></script>
        <style>
            .ht-widget-contextmenu ul {
                background: url("") repeat-y rgb(240, 240, 240) !important;
                background-position: -webkit-calc(1.4em + 4px) 0px !important;
                background-position: calc(1.4em + 4px) 0px !important;
                border-radius: 0 !important;
            }
            .ht-widget-contextmenu .menu-item {
                background: rgba(0,0,0,0) !important;
                color: black !important;
                border: 1px solid rgba(0,0,0,0) !important;
                border-radius: 2px !important;
                margin: 3px 2px !important;
            }
            .ht-widget-contextmenu .menu-item.menu-item-hover {
                background: -webkit-linear-gradient(top, rgba(193,222,255,0.2),rgba(193,222,255,0.4)) !important;
                background: linear-gradient(to bottom, rgba(193,222,255,0.2),rgba(193,222,255,0.4)) !important;
                color: black !important;
                border: 1px solid rgb(183,212,246) !important;
            }
            .ht-widget-contextmenu .menu-item.disabled {
                color: #888 !important;
                background: rgba(0,0,0,0) !important;
            }
            .ht-widget-contextmenu .menu-item.disabled.menu-item-hover {
                color: #888 !important;
                background: rgba(0,0,0,0) !important;
                border: 1px solid rgba(0,0,0,0) !important;
            }
            .ht-widget-contextmenu .prefix {
                margin-right: 0.8em !important;
            }
            .ht-widget-contextmenu .suffix {
                margin-left: 3em !important;
                margin-right: 1em !important;
            }
            .ht-widget-contextmenu .separator {
                margin-left: -webkit-calc(1.4em + 5px) !important;
                margin-left: calc(1.4em + 5px) !important;
                height: 2px !important;
                background-image: -webkit-linear-gradient(top, rgb(226,226,226), rgb(226,226,226) 50%,rgb(252,252,252) 50%,rgb(252,252,252)) !important;
                background-image: linear-gradient(to bottom, rgb(226,226,226), rgb(226,226,226) 50%,rgb(252,252,252) 50%,rgb(252,252,252)) !important;
            }
        </style>
        
        <!--[if IE 9]>
            <style>
                .ht-widget-contextmenu ul {
                    background-position: 1.6em 0 !important;
                }
                .ht-widget-contextmenu .menu-item.menu-item-hover {
                    background: rgba(193,222,255,0.4) !important;
                }
                .ht-widget-contextmenu .separator {
                    margin-left: calc(1.6em + 1px) !important;
                    background: url() repeat-x !important;
                }
            </style>
        <![endif]-->
        
        <script type="text/javascript">
            ht.Default.setImage('contextmenu_icon', "settings.png");
            var iconSrc = 'contextmenu_icon';
            
            function init() {
                var json = [
                    {
                        label: "CheckMenuItems",
                        items: [
                            {
                                label: "Check1",
                                icon: iconSrc,
                                type: "check"
                            },
                            {
                                label: "Check2",
                                icon: iconSrc,
                                type: "check"
                            },
                            {
                                label: "Check3",
                                icon: iconSrc,
                                type: "check",
                                items: [
                                    {
                                        label: "AAAA"
                                    },
                                    {
                                        label: "BBBB"
                                    },
                                    {
                                        label: "CCCC"
                                    },
                                    {
                                        label: "DDDD"
                                    },
                                    {
                                        label: "EEEE"
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        label: "RadioMenuItems",
                        items: [
                            {
                                label: "Radio1",
                                icon: iconSrc,
                                type: "radio",
                                groupId: 1
                            },
                            {
                                label: "Radio2",
                                icon: iconSrc,
                                type: "radio",
                                groupId: 1
                            },
                            {
                                label: "Radio3",
                                icon: iconSrc,
                                type: "radio",
                                groupId: 1
                            }
                        ]
                    },
                    "separator",
                    {
                        label: "Menu1(disabled)",
                        disabled: true
                    },   
                    {
                        label: "Menu2",
                        action: function(item, event) {
                            alert("you clicked:" + item.label + ",this=" + this);
                        },
                        scope: "hello"
                    },
                    {
                        label: "Menu3",
                        icon: iconSrc,
                        action: function(item) {
                            alert(item.label);
                        },
                        items: [
                            {
                                label: "Homepage",
                                href: "http://www.hightopo.com",
                                linkTarget: "_blank",
                                key: [Key.ctrl, Key.enter],
                                suffix: "Ctrl+Enter",
                                preventDefault: false
                            },
                            {
                                label: "submenu2",
                                action: function(item) {
                                    alert(item.label);
                                }
                            }
                        ]
                    }
                ];
                var contextmenu = new ht.widget.ContextMenu(json);
                contextmenu.enableGlobalKey();
                contextmenu.addTo(document.getElementById("div"));
            }
        </script>
    </head>
    <body onload="init();">
        <div id="div" style="width: 200px; height: 100px; background: #ddd; text-align: center;">Right Click Here!</div>
    </body>
</html>
